* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none; }

ul {
  font-size: 0;
  border-bottom: 1px dashed skyblue; }
  ul li {
    width: 20%;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    font-family: cursive;
    text-align: center;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    position: relative; }
    ul li:not(:last-child) {
      border-right: 1px dashed skyblue; }
    ul li:hover {
      color: white;
      background-color: aqua;
      font-size: 28px; }
    ul li:last-child::after {
      content: "";
      display: block;
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: #000;
      -webkit-transition: all 0.5s cubic-bezier(1, 0.2, 0.1, 1.8);
      -o-transition: all 0.5s cubic-bezier(1, 0.2, 0.1, 1.8);
      transition: all 0.5s cubic-bezier(1, 0.2, 0.1, 1.8); }
    ul li:nth-child(1).active ~ :last-child::after {
      -webkit-transform: translateX(-400%);
          -ms-transform: translateX(-400%);
           -o-transform: translateX(-400%);
              transform: translateX(-400%); }
    ul li:nth-child(2).active ~ :last-child::after {
      -webkit-transform: translateX(-300%);
          -ms-transform: translateX(-300%);
           -o-transform: translateX(-300%);
              transform: translateX(-300%); }
    ul li:nth-child(3).active ~ :last-child::after {
      -webkit-transform: translateX(-200%);
          -ms-transform: translateX(-200%);
           -o-transform: translateX(-200%);
              transform: translateX(-200%); }
    ul li:nth-child(4).active ~ :last-child::after {
      -webkit-transform: translateX(-100%);
          -ms-transform: translateX(-100%);
           -o-transform: translateX(-100%);
              transform: translateX(-100%); }
    ul li:last-child:active::after {
      -webkit-transform: translateX(0%);
          -ms-transform: translateX(0%);
           -o-transform: translateX(0%);
              transform: translateX(0%); }

.content_box {
  position: relative;
  height: 400px; }
  .content_box div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 400px;
    font-size: 48px;
    font-family: cursive;
    display: none; }
  .content_box .div1 {
    background-color: #f00;
    display: block; }
  .content_box .div2 {
    background-color: #0f0; }
  .content_box .div3 {
    background-color: #00f; }
  .content_box .div4 {
    background-color: #ff0; }
  .content_box .div5 {
    background-color: #0ff; }
